<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="webjars/Semantic-UI/2.4.1/semantic.css" rel="stylesheet">
    <link href="webjars/datatables/1.10.20/css/dataTables.semanticui.css" rel="stylesheet">
    <link href="webjars/datatables-buttons/1.6.1/css/buttons.semanticui.css" rel="stylesheet">
    <link href="css/responsive.semanticui.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <script src="webjars/jquery/3.4.1/jquery.min.js"></script>
    <script src="webjars/Semantic-UI/2.4.1/semantic.js"></script>
    <script src="webjars/datatables/1.10.20/js/jquery.dataTables.js"></script>
    <script src="webjars/datatables/1.10.20/js/dataTables.semanticui.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/dataTables.buttons.js"></script>
    <script src="webjars/datatables-buttons/1.6.1/js/buttons.semanticui.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/dataTables.responsive.js"></script>
    <script src="webjars/datatables-responsive/2.2.3/js/responsive.semanticui.js"></script>
    <script src="js/main.js"></script>
    <title>Принятые предложения</title>
</head>
<body>
<div class="ui container">
    <div th:insert="~{header :: header}"></div>
    <div class="ui segment">
        <table id="table" class="ui celled table responsive nowrap unstackable" width="100%">
            <thead>
            <tr>
                <th>id</th>
                <th>Заказ</th>
                <th>Описание</th>
                <th>Пользователь</th>
                <th>Питомец</th>
                <th></th>
            </tr>
            </thead>
        </table>
    </div>
    <div th:insert="~{footer :: footer}"></div>
</div>
<script>
    $(document).ready(function() {
        var table = $("#table").DataTable({
            "searching": false,
            ajax: {
                url: "acceptedOrder",
                type: "GET",
                dataSrc: ""
            },
            columns: [
                {"data": "id"},
                {"data": "order.title"},
                {"data": "order.description"},
                {
                    "data": null,
                    render: function(data) {
                        return '<a href="/profile?id='+data.order.user.id+'">'+data.order.user.name+'</a>';
                    }
                },
                {"data": "order.animal.name"},
                {
                    "data": null,
                    render: function(data) {
                        var btnWrite = '<button class="ui button" onClick=startDialog('+data.order.user.id+');>Написать</button>';
                        var btnDeclineDisabled = '<button class="ui button" disabled onClick=declineOrder('+data.id+');>Отказаться</button>';
                        var btnDeclineEnabled = '<button class="ui button" onClick=declineOrder('+data.id+');>Отказаться</button>';

                        if (data.order.status !== "NEW") {
                            return btnWrite + btnDeclineDisabled;
                        } else {
                            return btnWrite + btnDeclineEnabled;
                        }    
                    }
                }
            ],
            columnDefs: [
                {"targets": [0], "visible": false, "searchable": false},
                {responsivePriority: 0, targets: 1},
                {responsivePriority: 2, targets: 3},
                {responsivePriority: 3, targets: 4},
                {responsivePriority: 1, targets: -1}
            ],
            lengthChange: false
        });
    });

    function declineOrder(orderId) {
        var url = "acceptedOrder/"+orderId;
        deleteEntity(url, $("#table"));
    }

    function startDialog(userId) {
        var userTo = {"id": userId};
        var data = {"userTo": userTo};
        $.ajax({
            url: "dialog",
            type: "POST",
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function(data) {
                var url = "/chat?dialog_id="+data.id+"&id="+data.userTo.id;
                window.location.replace(url);
            }
        });
    }
</script>
</body>
</html>